<template>
	<el-dialog
		title="查看所有版本号"
		:visible="visible"
		width="1000px"
		:before-close="handleClose"
		@close="handleClose"
		:close-on-click-modal="false"
		center
	>
		<el-table
			ref="refTable"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			border
			size="mini"
			class="small-size-table"
			:data="dataList"
			style="width: 100%;"
			highlight-current-row
			:max-height="400"
			header-align="center"
			:header-cell-style="getRowClass"
		>
			<el-table-column
				type="index"
				label="序号"
				min-width="100"
				align="center"
			/>
			<el-table-column
				align="center"
				label="资源包类型"
				min-width="150"
				show-overflow-tooltip
			>
				<template>
					{{ typeName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="版本号"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.version || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作时间"
				min-width="180"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.operateAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作人"
				min-width="150"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.operator || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				label="操作"
				min-width="100"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span
						class="text-link"
						@click="handleShowDownload(scope.row)"
					>
						{{ $t('dxn.app_resource_manager.download') }}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<div slot="footer" class="dialog-footer">
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</div>
		<div id="downloadDiv" style="display: none;"></div>
	</el-dialog>
</template>
<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		detail: {
			type: Object,
			default: {}
		},
		resourceTypeArr: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			dataList: [],
			loading: false,
			typeName: this.getTypeName(this.detail.type, this.resourceTypeArr)
		}
	},
	watch: {
		'detail.type': {
			handler(val) {
				if (val) {
					this.loadRecordData()
				}
			},
			immediate: true
		}
	},
	methods: {
		handleDownload(url) {
			const downloadDiv = document.getElementById('downloadDiv')
			const link = document.createElement('a')
			link.href = url.replace(/^http:/, 'https:')
			downloadDiv.appendChild(link)
			link.click()
			downloadDiv.removeChild(link)
		},
		handleShowDownload(row) {
			if (!row.path) {
				return this.$message.warning('没有资源包可下载')
			}
			this.$confirm(
				`是否下载${this.typeName}${row.version}版本资源包？`,
				'下载资源包',
				{
					confirmButtonText: this.$t('common.sure'),
					cancelButtonText: this.$t('common.cancel')
				}
			)
				.then(() => {
					// const fileName = this.typeName + row.version + '.zip'
					this.handleDownload(row.path)
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					})
				})
		},
		loadRecordData() {
			this.loading = true
			this.dataList = []
			const params = this.getParams({
				packageId: this.detail.type
			})
			this.$api
				.getResourcePackageVersionListBend(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record
						this.total = res?.data.totalRecord
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleClose() {
			this.$emit('update:visible', false)
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadRecordData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadRecordData()
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .pageValue {
	position: unset;
	margin-left: 0px;
}
</style>
